Передайте параметр контроллеру MVC PHP и откройте новую страницу без кнопки отправки

Question

У меня есть страница с изображениями. На каждом изображении есть событие onClick и идентификатор, позволяющий просмотреть детали этого рецепта. Когда вы щелкаете, он переходит через AJAX к действию в контроллере, которое создает новое представление с Twig. Проблема в том, что он не перезагружается (не кнопка отправки), и когда я назначаю ответ на html, меню в начале новой страницы не работают. И, кроме того, не меняет URL-адрес (только если я сделаю этот хитрый window.history.pushState и не вернусь к истории, пока вы не обновите sh страницу)

HTML

JS

function showDetail() {
  var detailId = $(event.target).attr('id');
  $.ajax({
    type: "post",
    url: "showDetail",
    dataType: "html",
    data: {id:detailId},
    success: function(res){
      // $("html").html(res); // this one makes menus don't work
    },
    error: function(jqXHR, textStatus, errorThrown){ $("#respRecipe").html(textStatus + ' ' + jqXHR.status + ' ' + errorThrown); }
  });

Контроллер

public function showDetailAction($params) {
    $model = new DetailModel;
    $recipeData = $model->recipeDataDB($params["id"]);
    View::renderTwig('Detail/detail.html', array('recipeData'=>$recipeData[0],
    'ingredientsData'=>$recipeData[1], 'commentsData'=>$recipeData[2]));
}

маршруты. json (Могу ли я изменить это, чтобы принимать параметры без необходимости AJAX? )

"showDetail": {
    "controller": "DetailController",
    "action": "showDetail"
 },

.htaccess

<IfModule mod_rewrite.c>

    RewriteEngine on
    RewriteRule ^([a-zA-Z0-9\-\_\/]*)$ index.php?p=$1

</IfModule>

Я не знаю, смогу ли я, но скрытая кнопка отправки внутри изображения ... Основные проблемы - обновить страницу sh , URL и рабочие меню.

Заранее спасибо.

Answer 1

Проблема в том, что он не перезагружается (не кнопка отправки), и когда я назначаю ответ на html, меню в начале новой страницы не работают.

при вызове Ajax, страница не перезагружается. Ajax предполагает сделать запрос и получить ответ без перезагрузки

И, кроме того, не меняет URL-адрес (только если я сделаю этот хитрый window.history.pushState, а не 'Не работает возврат истории назад, пока вы не обновите sh страницу)

Обычно с Ajax мы не меняем URL-адрес, если только мы не намеревались go на другой маршрут страницы.

Вы можете изменить содержание тега html, если при этом получаете правильный ответ.

Answer 2

Решено! Я создал повар ie, срок действия которого истекает через 5 секунд. В консоли нет ошибки и меню работают :)

function showDetail() {
  var d = new Date();
  d.setTime(d.getTime() + 5000);
  var expires = "expires=" + d.toUTCString();
  document.cookie = "idRecipe=" + $(event.target).attr("id") + "; " + expires;
  location.href = "detail";
}

public function showDetailAction() {
    $model = new DetailModel;
    $recipeData = $model->recipeDataDB($_COOKIE["idRecipe"]);
    View::renderTwig('Detail/detail.html', array('recipeData'=>$recipeData[0],
    'ingredientsData'=>$recipeData[1], 'commentsData'=>$recipeData[2]));
}

Answer 3

Попробуйте разместить контейнер внутри страницы и загрузить данные, возвращенные из AJAX. Оператор $("html").html(res); заменяет весь контент, возвращенный из ответа AJAX, вместо этого используется некоторый div, который загружает результат $("div#YOURID").html(res);

Требуются дополнительные сведения, поскольку, возможно, вашему меню требуется некоторая jQuery инициализация и c.

Answer 4

Вероятно, у вас где-то ошибка Javascript, посмотрите в консоли (F12).

Идея запроса AJAX не в перезагрузке страницы, а в том, чтобы запрос информации с сервера и возможность работы с возвращенными данными без необходимости обновлять sh страницу. Если он обновляет страницу, это часто является ошибкой JS, хотя в вашем случае вы просите обновить все html с помощью $("html").html(res);, что не идеально.

Итак, в вашем AJAX успехе попробуйте сделать что-нибудь вроде $('#myDiv').html(res);. Если вы получите успешный ответ на звонок AJAX (вы могли бы console.log(res); узнать), то <div id="myDiv"></div> получит результат. Вам нужно будет добавить div в свой HTML.

Как только вы получите <div id="myDiv"></div>, чтобы показать результат без обновления страницы, вы можете отправить обратно гораздо меньший блок HTML, чем шаблон состоящий из всех HTML для страницы.